<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>keybord</title>
		<style>
			body {
				margin: 0;
				padding: 0;
			}

			.keybord {
				display: grid;
				width: 1050px;
				height: 325px;
				grid-template-columns: repeat(30, 30px);
				grid-template-rows: repeat(5, 60px);
				margin: 10px 600px;
				background-color: #C5C5C5;
				border-radius: 20px;
				padding: 20px;
				transform: translateX(-50%);
				gap: 3px;
			}

			.key {
				grid-column: span 2;
				/*合并2个单元格*/
				background-color: #f3f3f3;
				border: 2px solid;
				/*默认黑色*/
				line-height: 60px;
				text-align: center;
				border-radius: 5px;
				cursor: pointer;
			}

			.tab,
			.ctrl {
				grid-column: span 3;
			}

			.space {
				grid-column: span 10;
			}

			.shift {
				grid-column: span 5;
			}

			.enter,
			.capslock,
			.backspace {
				grid-column: span 4;
			}

			.oblique {
				grid-column: span 3;
			}

			.command {
				grid-column: span 6;
			}
		</style>
		<style type="text/css">
			.container {
				display: grid;
				grid-template-columns: repeat(auto-fill, 100px);
				/* display: flex;
				flex-flow: row wrap; */
				gap: 20px;

			}

			.item {
				width: 100px;
				height: 100px;
				border: 1px solid limegreen;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
			<div class="item">6</div>
			<div class="item">7</div>
			<div class="item">8</div>
			<div class="item">9</div>
			<div class="item">10</div>
		</div>
		<div class="keybord">
			<div class="key ~">~</div>
			<div class="key">1</div>
			<div class="key">2</div>
			<div class="key">3</div>
			<div class="key">4</div>
			<div class="key">5</div>
			<div class="key">6</div>
			<div class="key">7</div>
			<div class="key">8</div>
			<div class="key">9</div>
			<div class="key">0</div>
			<div class="key">-</div>
			<div class="key">=</div>
			<div class="key backspace">Backspace</div>
			<div class="key tab">Tab</div>
			<div class="key">Q</div>
			<div class="key">W</div>
			<div class="key">E</div>
			<div class="key">R</div>
			<div class="key">T</div>
			<div class="key">Y</div>
			<div class="key">U</div>
			<div class="key">I</div>
			<div class="key">O</div>
			<div class="key">P</div>
			<div class="key">{</div>
			<div class="key">}</div>
			<div class="key oblique">\</div>
			<div class="key capslock">Capslock</div>
			<div class="key">A</div>
			<div class="key">S</div>
			<div class="key">D</div>
			<div class="key">F</div>
			<div class="key">G</div>
			<div class="key">H</div>
			<div class="key">J</div>
			<div class="key">K</div>
			<div class="key">L</div>
			<div class="key">;</div>
			<div class="key">'</div>
			<div class="key enter">Enter</div>
			<div class="key shift">Shift</div>
			<div class="key">Z</div>
			<div class="key">X</div>
			<div class="key">C</div>
			<div class="key">V</div>
			<div class="key">B</div>
			<div class="key">N</div>
			<div class="key">M</div>
			<div class="key">,</div>
			<div class="key">.</div>
			<div class="key">/</div>
			<div class="key shift">Shift</div>
			<div class="key ctrl">Ctrl</div>
			<div class="key">Fn</div>
			<div class="key">Win</div>
			<div class="key">Alt</div>
			<div class="key space">Space</div>
			<div class="key">Alt</div>
			<div class="key ctrl">Ctrl</div>
			<div class="key command">Command</div>
		</div>
	</body>
</html>